<div class="tabbar">
	<a href="/" class="tab-item" data-key="home" data-icon="/img/icon1.png" data-icon-active="/img/icon1_active.png">
		<span class="icon"><img src="/img/icon1.png" alt="首页"></span>
		<span class="label">首页</span>
	</a>
	<a href="/catgory.php" class="tab-item" data-key="cate" data-icon="/img/icon2.png" data-icon-active="/img/icon2_active.png">
		<span class="icon"><img src="/img/icon2.png" alt="分类"></span>
		<span class="label">分类</span>
	</a>
	<a href="/user/" class="tab-item" data-key="me" data-icon="/img/icon3.png" data-icon-active="/img/icon3_active.png">
		<span class="icon"><img src="/img/icon3.png" alt="我的"></span>
		<span class="label">我的</span>
	</a>
</div>

<style>
		a{-webkit-tap-highlight-color:transparent;outline:none;}
	.tabbar{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-top: none;
		box-shadow: 0 -0.06rem 0.2rem rgba(0,0,0,0.04);
		height: 0.64rem;
		padding-bottom: calc(env(safe-area-inset-bottom, 0));
		z-index: 999;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.tab-item{
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		color: #6b7280; /* 未激活文字 */
	}
	.tab-item .icon{
		width: 0.26rem;
		height: 0.26rem;
		display: block;
		margin-bottom: 0.04rem;
	}
	.tab-item .icon img{
		width: 100%; height: 100%; display: block;
	}
	.tab-item .label{
		font-size: 0.13rem;
		line-height: 1;
	}
	.tab-item.active{
		color: #253043; /* 激活文字颜色（深蓝灰，接近截图） */
		font-weight: 600;
	}
	/* 给页面主体留出 tabbar 高度，避免被遮挡（如页面没自带内边距时） */
	body{ padding-bottom: 0.64rem; }
	@supports (padding-bottom: env(safe-area-inset-bottom)){
		body{ padding-bottom: calc(0.64rem + env(safe-area-inset-bottom)); }
	}
</style>

<script>
		// 根据当前路径高亮对应项并切换图标
		(function() {
		var path = location.pathname.replace(/\/+$/, ""); // 去尾部斜杠
		var items = document.querySelectorAll(".tabbar .tab-item");
		items.forEach(function(a){
			var href = a.getAttribute("href") || "";
			var norm = href.replace(/\/+$/, "");
			// 主页精确等于根，其他使用 startsWith 规则
			var isActive = (norm === "" || norm === "/") ? (path === "" || path === "/") : path.indexOf(norm) === 0;
			var img = a.querySelector(".icon img");
			if(isActive){ 
				a.classList.add("active");
				if(img && a.getAttribute("data-icon-active")){
					img.src = a.getAttribute("data-icon-active");
				}
			} else {
				if(img && a.getAttribute("data-icon")){
					img.src = a.getAttribute("data-icon");
				}
			}
		});
	})();
	$(".close").on("click",function(){
		$(".fixed").hide();
	});
	// var bodyWidth = document.documentElement.clientWidth / 6.4;
	// if (bodyWidth > 100) {
	// 	document.documentElement.style.fontSize = 100 + "px";		
	// } else {
	// 	document.documentElement.style.fontSize = bodyWidth + "px";
	// }
	(function(){
		var docEl = document.documentElement;
		var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
		function recalc() {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			// 设计稿 375px，1rem = 100px，方便换算：12px = 0.12rem, 14px = 0.14rem（px值 ÷ 100 = rem值）
			// 在 375px 屏幕上：1rem = 100px；在其他屏幕上按比例缩放
			docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
		}
		if (!document.addEventListener) return;
		window.addEventListener(resizeEvt, recalc, false);
		document.addEventListener('DOMContentLoaded', recalc, false);
		recalc();
	})();
</script>